<template>
  <div class="multistep-form-examples">
    <!-- 示例1：基础用法 -->
    <h2>基础用法</h2>
    <MultistepForm
      :steps="steps1"
      v-model:current-step="currentStep1"
      :initial-form="form1"
      @finish="handleSubmit1"
    >
      <template #step-0="{ formData }">
        <input v-model="formData.name" placeholder="姓名">
      </template>
      <template #step-1="{ formData }">
        <input v-model="formData.email" placeholder="邮箱">
      </template>
    </MultistepForm>

    <!-- 示例2：自定义按钮 -->
    <h2>自定义按钮</h2>
    <MultistepForm
      :steps="steps2"
      v-model:current-step="currentStep2"
      :initial-form="form2"
      @finish="handleSubmit2"
    >
      <template #step-0="{ formData }">
        <input v-model="formData.username" placeholder="用户名">
      </template>
      <template #step-1="{ formData }">
        <input v-model="formData.password" placeholder="密码">
      </template>
      <template #prev-button>
        <button class="custom-button prev">返回上一步</button>
      </template>
      <template #next-button>
        <button class="custom-button next">下一步</button>
      </template>
    </MultistepForm>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import MultistepForm from '@/components/MultistepForm/MultistepForm.vue'

// 示例1：基础用法
const currentStep1 = ref(0)
const form1 = ref({
  name: '',
  email: ''
})
const steps1 = [
  { title: '个人信息', description: '请输入您的姓名' },
  { title: '联系方式', description: '请输入您的邮箱' }
]
const handleSubmit1 = (formData) => {
  console.log('基础表单提交数据:', formData)
}

// 示例2：自定义按钮
const currentStep2 = ref(0)
const form2 = ref({
  username: '',
  password: ''
})
const steps2 = [
  { title: '账号信息', description: '请输入用户名' },
  { title: '密码设置', description: '请设置密码' }
]
const handleSubmit2 = (formData) => {
  console.log('自定义按钮表单提交数据:', formData)
}
</script>

<style scoped>
.multistep-form-examples {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

h2 {
  margin: 30px 0 20px;
  color: #333;
}

input {
  width: 100%;
  padding: 8px;
  margin: 8px 0;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.custom-button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin: 0 8px;
}

.custom-button.prev {
  background-color: #f5f5f5;
  color: #666;
}

.custom-button.next {
  background-color: #1890ff;
  color: white;
}

.custom-button:hover {
  opacity: 0.9;
}
</style>